<template>
	<view class="home">
		<swiper :circular="true" class="swiper1" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
		    <swiper-item v-for="item in banList" :key="item.id">
		       <image :src="item.img_url" mode="" class="ban"></image>
		    </swiper-item>
		</swiper>
		
		<!-- <image src="../../static/icons/search.png" mode=""></image>
		 -->
		
<view class="tui">
	<text >品类推荐</text>
	<text class="more">更多></text>
</view>
		
	<view class="color">
		
		<view class="box">
			<swiper :circular="true" class="swiper" :interval="interval" :duration="duration" display-multiple-items="3" >
			    <swiper-item v-for="item in array" :key="item.id"  >
					<view class="hz">
						
					</view>
			       <image :src="item.cover_img" mode="" class="photo" @tap="goFind"></image>
				   <view class="desc" >
				   	<text>{{item.cname}}</text>
				   </view>
				   <view class="ename">
				   	<text>{{item.ename}}</text>
				   </view>
			    </swiper-item>
			</swiper>
		</view>
		
		<view class="spe">
			<text >特色优选</text>
			<text class="more1">更多></text>
		</view>
		
		
		<view class="last">
			<swiper :circular="true" class="swiper" :interval="interval" :duration="duration"  >
			    <swiper-item v-for="item in productList" :key="item.id"  >
					<view class="hzy">
						<image :src="item.cover_img"></image>
				        <text class="de">{{item.descr}}</text>
						<text class="gname">{{item.gname}}</text>
						<view class="one">
							
						</view>
						<view class="two">
							
						</view>
						<view class="three">
							
						</view>
				  
					</view>
			      
				  
			    </swiper-item>
			</swiper>
		</view>
		
	</view>
		
		
		
		
		
		
	</view>
</template>

<script>
	import { banners , hotList, brandList, productList,seriesAll} from "../../util/home/index.js"
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				banList:[],
				hotList:[],
				brandList:[],
				productList:[],
				array:[]
			};
			
			
		},
		methods:{
			goFind(){
				uni.switchTab({
					url:"../find/find"
				})
			}
		},
		
		
		onLoad(){
			banners({
				use:0
			}).then(res=>{
				console.log(res)
				this.banList=res.data.data
			}),	
			
			hotList().then(res=>{
				console.log(res)
				this.hotList=res.data.data
			}),
			
			// brandList().then(res=>{
			// 	console.log(res)
			// 	this.brandList=res.data.data
			// }),
			productList().then(res=>{
				console.log(res)
				this.productList=res.data.data.list
			})
			
			
			seriesAll().then(res=>{
				console.log(res)
				this.array=res.data.data
			})
					
		
		}
		
		
		
		
	}
</script>

<style lang="scss" scoped>
	.home{
		padding-top: var(--status-bar-height);
	}
	.color{
		background-color: #f1ece7;
		height: 600px;
	}
	.swiper1{
		width: 100%;
		height: 500rpx;
		// background-color: #fcfcfc;
		margin-right: 100px;
	}
	
	.ban{
		width: 100%;
		height: 516rpx;
		
	}
	.box{
		width: 100%;
		height: 600px;
		
		margin-top: 150rpx;
	}
	
	
	
	
	
	.swiper{
		width: 100%;
		height: 500rpx;
		background-color: #f1ece7;
		margin-right: 100px;
	}
	.hz{
		width: 208rpx;
		height:140rpx;
		margin-top: 20px;
		background-color: #fff;
		margin-right: 20px;
		border-radius: 10px;
		
	}
	.photo{
		width: 144rpx;
		height: 124rpx;
		position: absolute;
		top: 98rpx;
		margin-left: 20px;
		border-radius: 20px;
	}
	.desc{
		position: relative;
		top: 30px;
		font-weight: 500;
		margin-left: 20px;
	}
	.ename{
		position: relative;
		top: 40px;
		margin-left: 20px;
		color: #8c8c8c;
	}
	
	
	
	.last{
		width: 100%;
		height: 300px;
		margin-top: 10px;
		position: absolute;
		top: 700px;
		
	}
	.hzy{
		width: 590rpx;
		height:260rpx;
		margin-top: 20px;
		background-color: #fff;
		margin-left: 25px;
		// margin-right: 20px;
		border-radius: 20px;
		
	}
	.hzy image{
		width: 194rpx;
		height: 280rpx;
		position: relative;
		top: -15px;
		margin-left: 30px;
		border-radius: 20px;
	}
	.de{
		position: absolute;
		margin-left: 40px;
		margin-top: 20px;
	}
	.gname{
		position: absolute;
		margin-left: 40px;
		margin-top: 50px;
		color: #B0B0B0;
		font-size: 14px;
		
	}
	.one{
		width: 15px;
		height: 15px;
		border-radius: 7.5px;
		background-color: #446675;
		position: absolute;
		left: 190px;
		top: 100px;
	}
	.two{
		width: 15px;
		height: 15px;
		border-radius: 7.5px;
		background-color: #6A4826;
		position: absolute;
		left: 210px;
		top: 100px;
	}
	.three{
		width: 15px;
		height: 15px;
		border-radius: 7.5px;
		background-color: #E7D8BB;
		position: absolute;
		left: 230px;
		top: 100px;
	}
	
	
	.tui{
		width: 100%;
		height: 120px;
		font-size: 26px;
		color: #3E3E3E;
		letter-spacing: 2.29px;
		position: absolute;
		top: 278px;
		line-height: 120px;
		margin-top: -25px;
		font-weight: bolder;
		background-color: #f1ece7;
	}
	.tui .more{
		position: absolute;
		right: 20px;
		font-size: 18px;
		color: #8C8C8C;
		letter-spacing: 1.86px;
	}
	.spe{
		width: 100%;
		height: 120px;
		font-size: 26px;
		color: #3E3E3E;
		letter-spacing: 2.29px;
		position: absolute;
		top: 600px;
		line-height: 120px;
		
		font-weight: bolder;
		
	}
	.spe .more1{
		position: absolute;
		right: 20px;
		font-size: 18px;
		color: #8C8C8C;
		letter-spacing: 1.86px;
	}
	
	
	

</style>
